[양지선] sprint4 #150

geesunny · 2025-03-22T14:52:48Z

요구사항

기본

로그인

이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 "이메일을 입력해주세요." 빨강색 에러 메세지를 보입니다.
이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 "잘못된 이메일 형식입니다" 빨강색 에러 메세지를 보입니다.
비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 "비밀번호를 입력해주세요." 에러 메세지를 보입니다
비밀번호 input에서 focus out 할 때, 값이 8자 미만일 경우 아래에 "비밀번호를 8자 이상 입력해주세요." 에러 메세지를 보입니다.
input 에 빈 값이 있거나 에러 메세지가 있으면 '로그인' 버튼은 비활성화 됩니다.
input 에 유효한 값을 입력하면 '로그인' 버튼이 활성화 됩니다.
활성화된 '로그인' 버튼을 누르면 "/items" 로 이동합니다.

회원가입

이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 "이메일을 입력해주세요." 빨강색 에러 메세지를 보입니다.
이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 "잘못된 이메일 형식입니다" 빨강색 에러 메세지를 보입니다.
닉네임 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 "닉네임을 입력해주세요." 빨강색 에러 메세지를 보입니다.
비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 "비밀번호를 입력해주세요." 에러 메세지를 보입니다
비밀번호 input에서 focus out 할 때, 값이 8자 미만일 경우 아래에 "비밀번호를 8자 이상 입력해주세요." 에러 메세지를 보입니다.
비밀번호 input과 비밀번호 확인 input의 값이 다른 경우, 비밀번호 확인 input 아래에 "비밀번호가 일치하지 않습니다.." 에러 메세지를 보입니다.
input 에 빈 값이 있거나 에러 메세지가 있으면 '회원가입' 버튼은 비활성화 됩니다.
input 에 유효한 값을 입력하면 '회원가입' 버튼이 활성화 됩니다.
활성화된 '회원가입' 버튼을 누르면 로그인 페이지로 이동합니다

심화

눈 모양 아이콘 클릭시 비밀번호의 문자열이 보이기도 하고, 가려지기도 합니다.
비밀번호의 문자열이 가려질 때는 눈 모양 아이콘에는 사선이 그어져있고, 비밀번호의 문자열이 보일 때는 사선이 없는 눈 모양 아이콘이 보이도록 합니다.

배포

https://relaxed-macaron-caab4b.netlify.app/

멘토에게

셀프 코드 리뷰를 통해 질문 이어가겠습니다.

GANGYIKIM

지선님 4번째 미션 제출 수고하셨습니다.
기본 요구사항을 잘 작성하셔서 심화도 금방 하실 것 같아요!
시간이 되실때 심화도 구현해보시면 좋겠습니다~
다음 React 미션도 화이팅이에요!

GANGYIKIM · 2025-03-27T08:14:56Z

.vscode/settings.json

💊 제안
이러한 vscode 설정 파일은 github에 올라가지 않게 해주시는 것을 추천드려요.
github는 프로젝트를 공유하기 위한 공간으로 해당 프로젝트와 관련된 파일들만 올라가는 것이 좋습니다.
어떤 사람은 vscode를 쓰지 않고 다른 에디터를 쓸 수 있고 쓰더라도 port 번호를 다르게 할 수 있습니다.
따라서 이런 파일들은 변경사항에서 의도적으로 제외하시고 올리시거나 gitignore 같은 파일을 생성하셔서
자동으로 변경사항이 잡히지 않도록 하시는 것을 추천드립니다~

GANGYIKIM · 2025-03-27T08:41:28Z

index.html

                </div>
            </div>
        </footer>
+        <script src="validation.js"></script>


💊 제안

아마 script 태그를 HTML의 하단에 배치하신 이유가 script가 문서의 렌더링을 막지 않도록 하기 위해서이실 것 같아요.
하지만, script 태그에 defer나 async 속성을 사용하면 이런 문제를 해결할 수 있기 때문에 반드시 하단에 배치할 필요는 없습니다!
또한 script 태그는 상단에 있는게 구조 파악에서도 유리하기 때문에 상단 head 태그에 두시는 것을 추천드려요~

script async
script defer

지금과 같은 경우 DOM을 조작하는 JS 이니 defer 속성을 추가하시면 되겠습니다~

GANGYIKIM · 2025-03-27T08:42:18Z

validation.js

💊 제안
한 파일에서 로그인, 회원가입 공용으로 JS를 작성해주셨네요~
둘이 공통되는 부분이 많이 이렇게 해주신 것 같아요.
다만 그렇게 되면 코드가 복잡해져서 유지보수성이 떨어지고 로그인 페이지의 경우 불필요한 코드까지 알아야합니다~
가능하면 공통 로직들은 분리해주시고 각 페이지별 JS를 따로 만드시는 것을 추천드려요!

GANGYIKIM · 2025-03-27T08:46:26Z

validation.js

@@ -0,0 +1,148 @@
+console.log('validation.js loaded check');
+document.addEventListener('DOMContentLoaded', function () {
+    const emailLogin = document.getElementById('email-login');


❗️ 수정요청
변수명은 가독성에 있어서 중요한 역할을 합니다. 따라서 어떤 값인지 알 수 있는 변수명을 추천드려요.
아마 로그인과 회원가입에서 같은 js 파일을 쓰시느라 이렇게 이름을 지으신 것 같은데 다른 코멘트에서 말씀드린 것처럼 파일을 분리하시고 변수명은 email-login이라는 클래스명을 가진 input 태그이니 emailInput 과 같은 이름으로 변경하시는 것을 추천드립니다.

Suggested change

const emailLogin = document.getElementById('email-login');

const emailInput = document.getElementById('email-login');

GANGYIKIM · 2025-03-27T08:50:46Z

validation.js

+    function validateEmail(email) {
+        const regex = /^[^\s@]+@[^\s@]+.[^\s@]+$/;
+
+        return regex.test(email);
+    }
+
+    function validatePassword(password) {
+        return password.length >= 8;
+    }


👍 칭찬
유효성 검사 따로 함수로 빼신 것 좋습니다.

GANGYIKIM · 2025-03-27T08:54:49Z

validation.js

+        const isValidSignup =
+            emailSignup?.value &&
+            nicknameSignup?.value &&
+            passwordSignup?.value &&
+            passwordConfirmationSignup?.value &&
+            validateEmail(emailSignup.value) &&
+            validatePassword(passwordSignup.value) &&
+            passwordSignup.value === passwordConfirmationSignup.value;
+        if (signupButton) signupButton.disabled = !isValidSignup;
+    }


💊 제안
이런경우 가독성을 위해 따로 함수로 빼면 좋을 것 같아요.

Suggested change

const isValidSignup =

emailSignup?.value &&

nicknameSignup?.value &&

passwordSignup?.value &&

passwordConfirmationSignup?.value &&

validateEmail(emailSignup.value) &&

validatePassword(passwordSignup.value) &&

passwordSignup.value === passwordConfirmationSignup.value;

if (signupButton) signupButton.disabled = !isValidSignup;

}

// 로그인, 회원가입 로직 분리시 코드

signupButton.disabled = !checkFormValid();

}

GANGYIKIM · 2025-03-27T08:56:20Z

validation.js

+        input.classList.add('error');
+        const errorMessage = input.closest('.form-group').querySelector('.error-message');


💊 제안
자바스크립트에서 이런 변수들은 호이스팅됩니다. 따라서 가능한 변수, 함수선언문들은 해당 코드블록 최상단에 두시는 것이 좋습니다.

Suggested change

input.classList.add('error');

const errorMessage = input.closest('.form-group').querySelector('.error-message');

const errorMessage = input.closest('.form-group').querySelector('.error-message');

input.classList.add('error');

mdn Hoisting

GANGYIKIM · 2025-03-27T09:01:53Z

validation.js

+    if (passwordSignup) {
+        passwordSignup.addEventListener('focusout', function () {
+            if (!passwordSignup.value) {
+                showError(passwordSignup, '비밀번호를 입력해주세요.');
+            } else if (!validatePassword(passwordSignup.value)) {
+                showError(passwordSignup, '비밀번호를 8자 이상 입력해주세요.');
+            } else {
+                clearError(passwordSignup);
+            }
+            toggleButtonState();
+        });
+    }


💊 제안
지금 배포된 사이트에서 테스트를 해보면, 비밀번호와 비밀번호 확인 인풋의 값이 같았다가 비밀번호 인풋을 변경하면 에러가 나지 않으며 버튼이 활성화되지 않도록 구현되어 있습니다.
유저 입장에서는 피드백없이 진행이 불가능해지는 것이므로 의도한 동작이 아니라면 확인해보시고 수정하시면 좋겠습니다~

geesunny added 4 commits March 18, 2025 10:57

remove deletepart.html

5d51aa0

미션2 수정완료 멘토님 피드백

145d9f5

미션3 구현

aba988a

미션4 기능 구현

8aaf20d

geesunny requested a review from GANGYIKIM March 22, 2025 14:53

geesunny added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Mar 22, 2025

GANGYIKIM approved these changes Mar 27, 2025

View reviewed changes

GANGYIKIM merged commit 463fe3a into codeit-bootcamp-frontend:Basic-양지선 Mar 27, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[양지선] sprint4 #150

[양지선] sprint4 #150

Uh oh!

geesunny commented Mar 22, 2025 •

edited

Loading

Uh oh!

GANGYIKIM left a comment

Uh oh!

GANGYIKIM Mar 27, 2025

Uh oh!

GANGYIKIM Mar 27, 2025

Uh oh!

GANGYIKIM Mar 27, 2025

Uh oh!

GANGYIKIM Mar 27, 2025

Uh oh!

GANGYIKIM Mar 27, 2025

Uh oh!

GANGYIKIM Mar 27, 2025

Uh oh!

GANGYIKIM Mar 27, 2025

Uh oh!

GANGYIKIM Mar 27, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	const emailLogin = document.getElementById('email-login');
	const emailInput = document.getElementById('email-login');

		input.classList.add('error');
		const errorMessage = input.closest('.form-group').querySelector('.error-message');

[양지선] sprint4 #150

[양지선] sprint4 #150

Uh oh!

Conversation

geesunny commented Mar 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

요구사항

기본

심화

멘토에게

Uh oh!

GANGYIKIM left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

geesunny commented Mar 22, 2025 •

edited

Loading